<template>
    <el-timeline :reverse="reverse">
        <el-timeline-item
        v-for="(activity, index) in timelines"
        :key="index"
        :timestamp="activity.publishTime"
        :color="selectedIndex === index ? selectedColor : ''">
        <el-link :underline="false" @click.prevent="selectTime(index,activity.publishTime)" :type="selectedIndex === index ? 'primary' : ''">
            {{activity.title}}
        </el-link>
        </el-timeline-item>
    </el-timeline>
</template>
<script>
export default {
    name:'TimeLine',
    data:()=>{
        return{

        }
    },
    props:{
        timelines:{
            type:Array,
            default:()=>{
                return []
            }
        },
        selectedIndex:{
            type:Number,
            require:true
        },
        selectedColor:{
            type:String,
            default:'#3A58B9'
        }
    },
    methods:{
        selectTime(index,time){
            this.$emit('selectTime',index,time)
        }
    }
}
</script>
<style lang="scss">

</style>